<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>99vue的set方法</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    遍历对象
    <div v-for="(item, key, index) of userInfo">
          {{item}} -----{{key}} ---- {{index}}
    </div>
    set操作数组
    <div v-for="(item, index) of userInfoArr">
        {{item}}
    </div>
  </div>
  <script>
    // pop push shift unshift splice sort reverse
    // 数组和页面一起跟着变
    var vm = new Vue({
      el: "#root",
      data: {
        userInfo: {
          name: "claire",
          age: 28,
          gender: "female"
        },
        userInfoArr: [1, 2, 3, 4],

      },

    })
    // 全局方法
    Vue.set(vm.userInfo, "address", "beijing");
    // 实例方法
    vm.$set(vm.userInfo, "galary", "secret");

    Vue.set(vm.userInfoArr, 1, 5);
    vm.$set(vm.userInfoArr, 2, 8);
  </script>
  
</body>
</html>